<template>
    <!-- 标准 -->
    <view class="top_bar">
        <view class="pic_font">
            <image :src="data.logo" mode="aspectFill"></image>
            <view class="font_price">
                <text class="name">{{data.name}}</text>
                <text class="price">￥{{data.price}}</text>
            </view>
        </view>

        <view class="dric">
            <view class="dircItem" v-for="(item , index) in data.boon" :key="index">
                <icon type="success" size="15" />
                <text>{{item}}</text>
            </view>
        </view>
    </view>
    <!-- 医院地址 -->
    <view class="address">
        <view class="name_phone">
            <text>{{data.hospital}}</text>
            <image @click="phone(data.phone)" src="/static/other/dianhua.svg" mode="aspectFill"></image>
        </view>
        <view class="addressDetail">
            <text>{{data.address}}</text>
            <text>{{data.phone}}</text>
        </view>
    </view>
    <!-- 表单 -->
    <view class="form">
        <view class="flex-r">
            <text class="title">
                手机号
            </text>
            <input type="number" placeholder-class="placehoder-style" placeholder="请输入手机号" v-model="formData.phone" />
        </view>
        <view class=" flex-r">
            <text class="title">
                真实姓名
            </text>
            <input placeholder-class="placehoder-style" placeholder="请输入真实姓名" v-model="formData.name" />
        </view>
        <view class=" flex-r">
            <text class="title">
                身份证
            </text>
            <input type="number" placeholder-class="placehoder-style" placeholder="请输入身份证号码"
                v-model="formData.id_card" />
        </view>

    </view>
    <!-- 预约时间段 -->
    <view class="timePart">
        <label for="">选择预约时间段</label>
        <scroll-view class="data" :scroll-x="true">
            <view class="dataItem">
                <view v-for="(item, index) in data.date" :key="index" @click="selectTime(item.date,index)"
                    :class="selectTimestyle==index? 'selectStyletime':'' ">
                    <text>{{item.week}}</text>
                    <text>{{item.date}}</text>
                </view>
            </view>
        </scroll-view>
    </view>
    <!-- 采样方式 -->
    <view class="methods">
        <label for="">咽拭子采样方式</label>
        <view class="methodsItem" v-for="(item ,index) in data.style" :key="index">
            <text class="title">{{item.title}} </text>
            <text class="content" v-for="(content,index) in item.desc" :key="index">{{content}}</text>
        </view>
    </view>
    <view style="height: 300rpx"></view>
    <view class="submit">
        <text class="price">检测费用:￥{{data.price}}</text>
        <text class="btn" @click="submit">提交</text>
    </view>
    <!-- <Sknucleic /> -->
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import requestApi from '@/public/request'
import { nucleic } from '@/public/decl-type'
// import Sknucleic from '@/pages/common/SK-nucleic.vue'
//提交的表单
let formData = reactive({
    name: '',
    phone: '',
    id_card: '',
    time: ''
})
//请求到底数据
let nucleicDataObj = reactive<{ data: nucleic }>({
    data: {
        address: '',
        boon: [],
        date: [],
        hospital: '',
        logo: '',
        name: '',
        phone: '',
        price: 0,
        style: [],
        _id: '',
    }
});
let { data } = toRefs(nucleicDataObj);
//选择日期样式控制
let selectTimestyle = ref<number>();
//拨打电话
function phone(phone: string) {
        uni.makePhoneCall({
            phoneNumber: phone,
            fail:(err:any)=>{console.log(err);
            }
        })
}
//选择日期
function selectTime(date: string, index: number) {
    formData.time = date;
    selectTimestyle.value = index;
}
//提交
function submit() {
    uni.showLoading({
        title: '提交中',
        mask: true
    })
    requestApi.ResNuata(formData).then((res: any) => {
        uni.hideLoading()
        uni.redirectTo({
            url: '/pages/nucleic_acid_order/index'
        })
    }).catch((err: any) => {
        console.log(err);

    })
}
onMounted(() => {
    requestApi.nuataget().then((res: any) => {
        data.value = res.data.data[0]
    }).catch(err => { console.log(err); })
})
</script>
<style lang="scss">
page {
    background-color: #f7f7f7;
    padding: 0rpx 10rpx;
    box-sizing: border-box;

}

.top_bar {
    background-color: #ffffff;
    padding: 20rpx 15rpx;

    image {
        width: 100rpx;
        height: 100rpx;
    }

    .pic_font {
        margin-left: 5rpx;
        display: flex;
        margin-bottom: 25rpx;


        .name {
            font-size: 35rpx;
        }

        .price {
            color: #ff5f2c;
        }
    }

    .font_price {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .dric {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 25rpx;

        text {
            margin-left: 10rpx;
        }

        .dircItem {
            display: flex;
            align-items: center;
        }
    }
}

.address {
    display: flex;
    flex-direction: column;
    padding: 15rpx;
    margin-top: 10rpx;
    background-color: #ffffff;

    &>view {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .name_phone {
        text {
            font-size: 30rpx;
        }

        image {
            width: 30rpx;
            height: 30rpx;
        }

        margin-bottom: 20rpx;
    }

    .addressDetail {
        font-size: 25rpx;
    }
}

.form {
    background-color: #ffffff;
    margin-top: 15rpx;
}


.timePart {
    margin-top: 15rpx;
    padding: 20rpx 15rpx;
    background-color: #ffffff;

    label {
        font-size: 30rpx;
        font-weight: bold;
    }

    .data {
        margin-top: 20rpx;

    }

    .dataItem {
        display: flex;
        align-items: center;
        white-space: nowrap;

        view {
            display: flex;
            flex-direction: column;
            padding: 10rpx 30rpx;
            align-items: center;
            border-radius: 5%;

            text {
                font-size: 25rpx;
            }
        }
    }

    .selectStyletime {
        background-color: #0176ff;
        color: #ffffff;
    }
}

.methods {
    margin-top: 15rpx;
    padding: 20rpx 15rpx;
    background-color: #ffffff;

    label {
        font-size: 30rpx;
        font-weight: bold;
        display: block;
        margin-bottom: 10rpx;
    }

    .methodsItem {
        .title {
            display: inline-block;
            padding: 5rpx 8rpx;
            background-color: #0176ff;
            border-radius: 7%;
            font-size: 25rpx;
            color: #ffffff;
            margin: 20rpx 0rpx;
        }

        .content {
            font-size: 25rpx;
            display: block;
            margin-bottom: 15rpx;
        }
    }
}

.submit {
    padding: 10rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 99;
    width: 100%;
    right: 0;
    left: 0;
    bottom: 60rpx;

    .price {
        color: #ff5f2c;
    }

    .btn {
        padding: 10rpx 20rpx;
        display: inline-block;
        background-color: #0176ff;
        color: #ffffff;
        border-radius: 5%;
    }
}
</style>